<template>
	<!--pages/my/my.wxml-->
	<view class="container">
		<view class="top-container">
			<image class="bg-img" src="../../static/images/my/mine_bg_3x.png"></image>
			<!-- <view @tap="logout" class="logout" hover-class="opcity" :hover-stay-time="150">
				<image class="logout-img" src="../../static/images/my/icon_out_3x.png" v-show="isLogin"></image>
				<text class="logout-txt" v-show="isLogin">退出</text>
			</view> -->
			<view v-show="!isLogin" class="user-wrapper">
				<navigator url="../login/login" hover-class="opcity" :hover-stay-time="150" class="user">
					<image class="avatar-img" src="../../static/images/my/mine_def_touxiang_3x.png"></image>
					<text class="user-info-mobile">请登录</text>
				</navigator>
			</view>
			<view v-show="isLogin" class="user">
				<image class="avatar-img" lazy-load="true" :src="$cdn.appAvatar + headPic" @tap="edit"></image>
				<view class="user-info-mobile">
					<text>{{ userName }}</text>
					<view class="edit-img" hover-class="opcity" :hover-stay-time="150" @tap="edit"><image src="../../static/images/my/mine_icon_bianji_3x.png"></image></view>
				</view>
			</view>
		</view>

		<!-- 		<view class='middle-container'>
				<view @tap="tapEvent" data-index="2" data-key="加油站" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">99</text>
					<text class="item-name">粉丝</text>
				</view>
				<view @tap="tapEvent" data-index="2" data-key="停车场" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">99</text>
					<text class="item-name">关注</text>
				</view>
				<view @tap="tapEvent" data-index="2" data-key="充电桩" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">99</text>
					<text class="item-name">评价</text>
				</view>
				<view @tap="tapEvent" data-index="2" data-key="充电桩" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">99</text>
					<text class="item-name">收藏</text>
				</view>
		</view> -->

		<view class="bottom-container-one-row">
			<view class="ul-item">
				<view
					@tap="tapEventAndData('/auth/api/member/getMeLikeList', '我喜欢的')"
					data-index="2"
					data-key="加油站"
					class="item"
					hover-class="opcity"
					:hover-stay-time="150"
				>
					<text class="item-title">{{ meLikeCount }}</text>
					<text class="item-name">我喜欢</text>
				</view>
				<view
					@tap="tapEventAndData('/auth/api/member/getLikeMeList', '喜欢我的')"
					data-index="2"
					data-key="停车场"
					class="item"
					hover-class="opcity"
					:hover-stay-time="150"
				>
					<text class="item-title">{{ likeMeCount }}</text>
					<text class="item-name">喜欢我</text>
				</view>
				<view
					@tap="tapEventAndData('/auth/api/member/pageByMyVisitor', '最近访问我')"
					data-index="2"
					data-key="充电桩"
					class="item"
					hover-class="opcity"
					:hover-stay-time="150"
				>
					<text class="item-title">{{ visitorCount }}</text>
					<text class="item-name">最近来访</text>
				</view>
				<view
					@tap="tapEventAndData('/auth/api/member/pageByCollectMember', '我收藏的')"
					data-index="2"
					data-key="充电桩"
					class="item"
					hover-class="opcity"
					:hover-stay-time="150"
				>
					<text class="item-title">{{ collectMemberCount }}</text>
					<text class="item-name">收藏</text>
				</view>
			</view>
		</view>

		<!-- <view style="height: 14rpx;"></view> -->
		<view class="bottom-container">
			<view class="ul-item">
				<view @tap="tapEvent('act-join-list')" data-index="2" data-key="聚会" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/activity.png"></image>
					<text class="item-name">聚会</text>
				</view>
				<view @tap="tapEvent('my-group-list')" data-index="2" data-key="停车场" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/wxgroup.png"></image>
					<text class="item-name">群组</text>
				</view>
				<view @tap="toPlazaList" data-index="2" data-key="发布" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/plaza.png"></image>
					<text class="item-name">动态</text>
				</view>
			</view>
			<view class="ul-item">
				<view @tap="tapEvent('../msg/msg-list')" data-index="3" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/msg.png"></image>
					<!-- <tui-badge class="tui-right" type="red" style="color: white;">3</tui-badge> -->
					<text class="item-name">消息</text>
				</view>
				<view @tap="publish" data-index="2" data-key="发布" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/comment.png"></image>
					<text class="item-name">发布</text>
				</view>
				<view @tap="tapEvent('../system/setting')" data-index="3" class="item" hover-class="opcity" :hover-stay-time="150">
					<image class="item-img" src="../../static/images/my/setting.png"></image>
					<text class="item-name">设置</text>
				</view>
				<!-- <view class="item" hover-class="opcity" :hover-stay-time="150">
					<button open-type="feedback" class="btn-feedback"></button>
					<image class="item-img" src="../../static/images/my/feedback.png"></image>
					<text class="item-name">反馈</text>
				</view> -->
			</view>
		</view>

		<view class="bottom-container-one-row-2">
			<view><text style="font-size: 28rpx;">尊敬的『<text class="item-title">{{levelName}}</text>』,多参加活动入群,增长更快哦~</text></view>
			<view class="ul-item">
				<view data-index="2" data-key="停车场" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">Lv{{levelNum}}</text>
					<text class="item-name">等级</text>
				</view>
				<view @tap="tapEvent('../system/level-explain')" data-index="2" data-key="加油站" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">{{integralScore}}</text>
					<!-- <image class='item-img' src='../../static/images/my/mine_icon_jiayouzhan_3x.png'></image> -->
					<text class="item-name">积分</text>
				</view>
				<view @tap="tapEvent('act-join-list')" data-index="2" data-key="充电桩" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">{{ publishActCount }}</text>
					<text class="item-name">已发布</text>
				</view>
				<view @tap="tapEvent('act-join-list')" data-index="2" data-key="充电桩" class="item" hover-class="opcity" :hover-stay-time="150">
					<text class="item-title">{{ joinActCount }}</text>
					<text class="item-name">已参加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import tuiBadge from '@/components/badge/badge';
export default {
	components: {
		tuiBadge
	},
	computed: mapState(['isLogin', 'token', 'headPic', 'userName','memberId']),
	data() {
		return {
			$cdn: this.$cdn,
			collectMemberCount: '--',
			meLikeCount: '--',
			likeMeCount: '--',
			visitorCount: '--',
			joinActCount: '--',
			publishActCount: '--',
			levelNum:'--',
			integralScore:'--',
			levelName:'--'
		};
	},
	onLoad: function() {
		this.getMyPageAllSum();
	},
	methods: {
		logout: function() {
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				confirmColor: '#5677FC',
				success: res => {
					if (res.confirm) {
						uni.clearStorage();
						uni.reLaunch({
							url: '../login/login'
						});
					}
				}
			});
		},
		publish() {
			uni.showActionSheet({
				// title:'标题',
				itemList: ['微信群', '聚会', '动态'],
				success: e => {
					console.log(e.tapIndex);
					let url = '';
					if (e.tapIndex == 0) {
						url = '/pages/group/group-edit';
					} else if (e.tapIndex == 1) {
						url = '/pages/act/act-edit';
					} else if (e.tapIndex == 2) {
						url = '/pages/plaza/publish';
					}
					uni.navigateTo({
						url: url
					});
				}
			});
		},
		edit() {
			uni.navigateTo({
				url: 'userinfo'
			});
		},
		// 查看各用户中心数据
		tapEventAndData: function(urlForData, title) {
			uni.navigateTo({
				url: 'member-list-my?urlForData=' + urlForData + '&title=' + title
			});
		},
		// 菜单跳转
		tapEvent: function(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 调TA的动态页面
		toPlazaList(){
			uni.navigateTo({
				url:'../plaza/member-plaza-list?memberId='+this.memberId+ '&userName=我' 
			})
		},
		// 获取用户中心数据
		getMyPageAllSum() {
			//参数
			let postData = {};
			this.tui
				.request('/auth/api/member/getMyPageAllSum', postData, 'POST', false, true)
				.then(res => {
					// 关闭下拉刷新loading
					uni.stopPullDownRefresh();
					if (res.code == 0) {
						this.collectMemberCount = res.data.collectMemberCount;
						this.meLikeCount = res.data.meLikeCount;
						this.likeMeCount = res.data.likeMeCount;
						this.visitorCount = res.data.visitorCount;
						this.joinActCount = res.data.joinActCount;
						this.publishActCount = res.data.publishActCount;
						this.levelNum = res.data.levelNum;
						this.integralScore = res.data.integralScore;
						this.levelName=res.data.levelName;
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		this.getMyPageAllSum();
	}
};
</script>

<style>
/* pages/my/my.wxss */
.container {
	position: relative;
}

.top-container {
	height: 440rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 440rpx;
}

.logout {
	width: 110rpx;
	height: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 42rpx 0 24rpx 32rpx;
	position: relative;
	z-index: 2;
}

.logout-img {
	width: 36rpx;
	height: 36rpx;
	margin-right: 11rpx;
}

.logout-txt {
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
}

.user-wrapper {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.avatar-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	align-self: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	margin-top: 30rpx;
	align-items: center;
}

.user-info-mobile {
	margin-top: 30rpx;
	position: relative;
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
	align-self: center;
	padding: 0 50rpx;
}

.edit-img {
	position: absolute;
	width: 42rpx;
	height: 42rpx;
	right: 0;
	bottom: -4rpx;
}

.edit-img > image {
	width: 42rpx;
	height: 42rpx;
	padding-left: 25rpx;
}

.middle-container {
	height: 138rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 10rpx;
	background-color: #ffffff;
	margin: -30rpx 30rpx 26rpx 30rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
	position: relative;
	z-index: 2;
}

.middle-item {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ticket-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 65rpx;
}

.middle-tag {
	font-size: 28rpx;
	color: #333333;
	line-height: 28rpx;
	font-weight: bold;
	padding-left: 22rpx;
}

.car-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 97rpx;
}
.bottom-container-one-row {
	height: 140rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 40rpx 20rpx 40rpx;
	/* margin: 10rpx 30rpx; */
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	/* box-shadow: 0 0 10rpx #efefef; */
	/* position: relative; */
	z-index: 2;
	margin: -60rpx 30rpx 10rpx 30rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
}
.bottom-container-one-row-2 {
	height: 230rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx 40rpx 40rpx 40rpx;
	margin: 10rpx 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx #efefef;
}

.bottom-container {
	height: 334rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx 74rpx 40rpx 74rpx;
	margin: 0 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx #efefef;
}

.ul-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.item-img {
	width: 64rpx;
	height: 64rpx;
}

.item-name {
	padding-top: 4rpx;
	font-size: 24rpx;
	color: #666666;
	min-width: 80rpx;
	text-align: center;
}

.btn-feedback {
	background: transparent !important;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.item-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #5677fc;
}
</style>
